<?php ?>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
	.link {
		fill: none;
		stroke: #666;
		stroke-width: 1.5px;
	}

	#licensing {
		fill: blue;
	}

	.link.licensing {
		stroke: green;
	}

	.link.resolved {
		stroke-dasharray: 0, 2 1;
	}

	.link.reflected {

		stroke: green;
	}
	.link.notreflected {

		stroke: red;
	}
	.link.academic {

		stroke: yellow;
	}

	circle {
		fill: #ccc;
		stroke: #333;
		stroke-width: 1.5px;
	}

	text {
		font: 10px sans-serif;
		pointer-events: none;
		text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
	}

</style>
<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
		var links = [{
			"id" : "7",
			"type" : "reflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "home",
			"title" : "Lex title 7"
		}, {
			"id" : "8",
			"type" : "reflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "work",
			"title" : "Lex title 8"
		}, {
			"id" : "9",
			"type" : "reflected",
			"target" : "Collaboration, teamwork and leadership",
			"source" : "academic",
			"title" : "Lex title 9"
		}, {
			"id" : "10",
			"type" : "notreflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "home",
			"title" : "Lex title 10"
		}, {
			"id" : "11",
			"type" : "notreflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "home",
			"title" : ""
		}, {
			"id" : "12",
			"type" : "notreflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "work",
			"title" : ""
		}, {
			"id" : "13",
			"type" : "notreflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "academic",
			"title" : ""
		}, {
			"id" : "14",
			"type" : "notreflected",
			"target" : "Creativity and innovation",
			"source" : "academic",
			"title" : ""
		}, {
			"id" : "15",
			"type" : "reflected",
			"target" : "Creativity and innovation",
			"source" : "home",
			"title" : ""
		}]
		var nodes = {};

		// Compute the distinct nodes from the links.
		links.forEach(function(link) {

			link.source = nodes[[link.source][0]] || (nodes[[link.source][0]] = {
				name : [link.source][0]
			});

			link.target = nodes[[link.target][0]] || (nodes[[link.target][0]] = {
				name : [[link.target][0]] 
			});
// 			
			 // link.source = nodes[link.title] || (nodes[link.title] = {
				// name : link.title
		// });

		});


		var links2 = [{
			"id" : "7",
			"type" : "reflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "home",
			"title" : "Lex title 7"
		}, {
			"id" : "8",
			"type" : "reflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "work",
			"title" : "Lex title 8"
		}, {
			"id" : "9",
			"type" : "reflected",
			"target" : "Collaboration, teamwork and leadership",
			"source" : "academic",
			"title" : "Lex title 9"
		}, {
			"id" : "10",
			"type" : "notreflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "home",
			"title" : "Lex title 10"
		}, {
			"id" : "11",
			"type" : "notreflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "home",
			"title" : ""
		}, {
			"id" : "12",
			"type" : "notreflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "work",
			"title" : ""
		}, {
			"id" : "13",
			"type" : "notreflected",
			"target" : "Critical-thinking and problem-solving",
			"source" : "academic",
			"title" : ""
		}, {
			"id" : "14",
			"type" : "notreflected",
			"target" : "Creativity and innovation",
			"source" : "academic",
			"title" : ""
		}, {
			"id" : "15",
			"type" : "reflected",
			"target" : "Creativity and innovation",
			"source" : "home",
			"title" : ""
		}]
		var nodes2 = {};

		// Compute the distinct nodes from the links.
		links2.forEach(function(link2) {
			// link2.source = nodes2[link2.source] || (nodes2[link2.source] = {
				// name : link2.source
			// });
// 
			// link2.target = nodes2[link2.target] || (nodes2[link2.target] = {
				// name : link2.target
			// });

			link2.title = nodes2[[link2.title][0]] || (nodes2[[link2.title][0]] = {
				name : [[link2.title][0]] 
			});
		});

		var width = 960, height = 500;

		var force = d3.layout.force().nodes(d3.values(nodes)).links(links).size([width, height]).linkDistance(150).charge(-300).on("tick", tick).start();

		var force2 = d3.layout.force().nodes(d3.values(nodes2)).links(links2).size([width, height]).linkDistance(150).charge(-300).on("tick", tick).start();

		var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

		// Per-type markers, as they don't inherit styles.
		svg.append("defs").selectAll("marker").data(["reflected", "notreflected", "licensing"]).enter().append("marker").attr("id", function(d) {
			return d;
		}).attr("viewBox", "0 -5 10 10").attr("refX", 15).attr("refY", -1.5).attr("markerWidth", 6).attr("markerHeight", 6).attr("orient", "auto").append("path").attr("d", "M0,-5L10,0L0,5");

	
		var path = svg.append("g").selectAll("path").data(force.links()).enter().append("path").attr("class", function(d) {
			return "link " + d.type;
		}).attr("marker-end", function(d) {
			return "url(#" + d.type + ")";
		});

		var path2 = path.append("g").selectAll("path").data(force2.links()).enter().append("path").attr("class", function(d) {
				return "link " + d.type;
		}).attr("marker-end", function(d) {
			return "url(#" + d.type + ")";
		});

		// return "link " + d.title});

		var circle = svg.append("g").selectAll("circle").data(force.nodes()).enter().append("circle").attr("r", 6).call(force.drag);
		
		var circle2 = circle.append("g").selectAll("circle").data(force2.nodes()).enter().append("circle").attr("r", 20).call(force.drag);

		var text = svg.append("g").selectAll("text").data(force.nodes()).enter().append("text").attr("x", 8).attr("y", ".31em").text(function(d) {
			return d.name;
		});
		
		var text2 = svg.append("g").selectAll("text").data(force2.nodes()).enter().append("text").attr("x", 8).attr("y", ".31em").text(function(d) {
			return d.name;
		});

		// Use elliptical arc path segments to doubly-encode directionality.
		function tick() {
			path.attr("d", linkArc);
			path2.attr("d", linkArc);
			circle.attr("transform", transform);
			circle2.attr("transform", transform);
			text.attr("transform", transform);
			text2.attr("transform", transform);
		}

		function linkArc(d) {
			var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy);
			return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
		}

		function transform(d) {
			return "translate(" + d.x + "," + d.y + ")";
		}

	</script>
